<template>
  <view class="specialPage">
    <view class="bgImg"></view>
    <view class="special-header">
      <view class="header-title">大V专栏</view>
      <view class="add-icon" @click="onAdd">
        <u-icon name="plus" color="#134177" bold size="38rpx"></u-icon>
      </view>
    </view>
    <view class="special-search">
      <u-search placeholder="搜索专栏" v-model="keyword" bgColor="#fff" :showAction="false" inputAlign="center"
        clearabled></u-search>
    </view>
    <view class="special-list">
      <view class="special-nav" v-for="item,index in specialList" :key="index" @click="toPrincipal(item.type)">
        <image src="../../static/tabbar/score-active.png" mode=""></image>
        <view class="nav-name">{{item.name}}</view>
        <view class="nav-title">{{item.title}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mockList
  } from './mock.js'
  export default {
    name: 'SpecialPage',
    data() {
      return {
        keyword: '',
        specialList:[]
      };
    },
    created() {
      this.mockListApi()
    },
    methods: {
      async mockListApi() {
        const res = await mockList()
        this.specialList = res.data
        console.log(res);
      },
      toPrincipal(type) {
        uni.navigateTo({
          url: `/pages/specialColumnPage/specialHome?type=${type}`
        })
      },
      onAdd() {
        uni.navigateTo({
          url: '/pages/specialColumnPage/add-prompt'
        })
      }
    },
  };
</script>

<style lang="less" scoped>
  .specialPage {
    padding-top: var(--status-bar-height);
    position: relative;

    .special-header {
      position: sticky;
      z-index: 1;

      .header-title {
        font-size: 40rpx;
        font-weight: 500;
        color: #134177;
        text-align: center;

      }

      .add-icon {
        position: absolute;
        top: 10rpx;
        right: 30rpx;
        border: 4rpx solid #134177;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .special-search {
      box-sizing: border-box;
      padding: 0 30rpx;
      position: sticky;
      z-index: 1;
      margin-top: 26rpx;
    }

    .special-list {
      box-sizing: border-box;
      padding: 0 30rpx;
      position: sticky;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .special-nav {
        margin-top: 30rpx;
        width: 334rpx;

        image {
          height: 334rpx;
          width: 334rpx;
          border-radius: 10rpx;
        }

        .nav-name {
          font-size: 36rpx;
          font-weight: 500;
          margin-top: 14rpx;
        }

        .nav-title {
          font-size: 28rpx;
          font-weight: 500;
          color: #909090;
          margin-top: 6rpx;
        }
      }
    }
  }

  .bgImg {
    background: url(/static/img/collectPage/collect.png) no-repeat;
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 750rpx;
  }
</style>